<template>
    <el-dialog :visible="visible" :title="$t('fmeaProject.reversion')" :close-on-click-modal="false" width="1000px" height="600px" @close="close">
        <el-form ref="changeForm" size="medium" label-width="148px">
            <el-form-item :label="$t('fmeaProject.flowChartReversion')" prop="versionType">
                <el-table stripe :data="flowData" border style="width: 100%">
                    <el-table-column type="index" :label="$t('fmeaProject.index')" align="center" width="90" />
                    <el-table-column :label="$t('fmeaProject.opera')" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button v-show="scope.row.changeFlag==='1'" type="text" size="small" @click="handleChange(scope.row)">{{ $t('fmeaProject.autoUpdate') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" :label="$t('fmeaProject.processOrStep')" />
                    <el-table-column prop="type" :label="$t('fmeaProject.reversionType')" min-width="120" />
                    <el-table-column prop="remark" :label="$t('fmeaProject.description')" min-width="260" />
                </el-table>
                <pagination v-show="flowTotal>0" :total="flowTotal" :page.sync="queryFlowParams.pageNum" :limit.sync="queryFlowParams.pageSize" :page-sizes="[5]" @pagination="getFlowData" />
            </el-form-item>
            <el-form-item :label="$t('fmeaProject.characterReversion')" prop="version">
                <el-table stripe :data="characterData" border style="width: 100%">
                    <el-table-column type="index" :label="$t('fmeaProject.index')" align="center" width="90" />
                    <el-table-column prop="characterDescription" :label="$t('fmeaProject.characterDescription')" align="center" min-width="160" />
                    <el-table-column prop="description" :label="$t('fmeaProject.description')" align="center" min-width="260" />
                </el-table>
                <pagination v-show="characterTotal>0" :total="characterTotal" :page.sync="queryCharacterParams.pageNum" :limit.sync="queryCharacterParams.pageSize" :page-sizes="[5]" @pagination="getCharacterData" />
            </el-form-item>
            <el-form-item :label="$t('fmeaProject.baseFmeaReversion')" prop="library">
                <el-table stripe :data="basicFMEAData" border style="width: 100%">
                    <el-table-column type="index" :label="$t('fmeaProject.index')" align="center" width="90" />
                    <el-table-column :label="$t('fmeaProject.opera')" align="center" width="160">
                        <template slot-scope="scope">
                            <el-button v-show="scope.row.changeFlag==='1'" type="text" size="small" @click="handleChange(scope.row)">{{ $t('fmeaProject.autoUpdate') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="basicProjectCode" :label="$t('fmeaProject.pfmeaId')" align="center" min-width="120" />
                    <el-table-column prop="structureName" :label="params.appId==='PFMEA'?$t('fmeaProject.processOrStep'):$t('fmeaProject.bom')" align="center" min-width="160" />
                    <el-table-column prop="changeContent" :label="$t('fmeaProject.reversionHis')" align="center" min-width="260">
                        <template slot-scope="scope">
                            <p v-html="scope.row.remark" />
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="basicFmeaTotal>0" :total="basicFmeaTotal" :page.sync="queryBFParams.pageNum" :limit.sync="queryBFParams.pageSize" :page-sizes="[5]" @pagination="getBasicFMEAData" />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="close">{{ $t('btn.close') }}</el-button>
        </div>
        <contrast-dialog v-if="contrastVisible" :visible.sync="contrastVisible" :params="contrastParams" @update="update" />
    </el-dialog>
</template>

<script>
import ContrastDialog from '@/views/components/Change/ContrastDialog'
import {
    fmeaChangeList,
    fmeaChange,
    characterChangeList,
} from '@/api/fmea/common/fmeaChange'
export default {
    name: 'ChangeDialog',
    components: {
        ContrastDialog,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        // appId,projectId,version
        params: {
            type: Object,
            default: null,
        },
    },
    data() {
        return {
            flowTotal: 0,
            queryFlowParams: { pageNum: 1, pageSize: 5 },
            characterTotal: 0,
            queryCharacterParams: { pageNum: 1, pageSize: 5 },
            basicFmeaTotal: 0,
            queryBFParams: { pageNum: 1, pageSize: 5 },
            flowData: [],
            characterData: [],
            basicFMEAData: [],
            contrastVisible: false,
            contrastParams: {},
        }
    },
    created() {
        this.getCharacterData()
        this.getBasicFMEAData()
    },
    methods: {
        getFlowData() {},
        getCharacterData() {
            this.queryCharacterParams.projectId = this.params.projectId
            characterChangeList(this.queryCharacterParams).then((res) => {
                this.characterData = res.rows
                this.characterTotal = res.total
            })
        },
        getBasicFMEAData() {
            this.queryBFParams.projectId = this.params.projectId
            fmeaChangeList(this.queryBFParams).then((res) => {
                this.basicFMEAData = res.rows
                this.basicFmeaTotal = res.total
            })
        },
        handleChange(row) {
            this.contrastVisible = true
            this.contrastParams = {
                id: row.id,
            }
        },
        update(id) {
            fmeaChange({ id }).then((res) => {
                this.getBasicFMEAData()
            })
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style scoped>
</style>
